<template>
  <div class='swipercontainer'>
    <div class='swiper' @mouseover='mouseover' @mouseout='mouseout'>
      <ul>
        <li v-for='(item,index) in list ' :key='index' v-show='index == n'>
          <a href=''>
            <img :src='item.pic' alt=''>
          </a>
        </li>
      </ul>
      <div class='left' @click="next('left')"></div>
      <div class='right' @click="next('right')"></div>


      <div class='img'>
        <p>PC 安卓 iPhone WP iPad Mac 六大客户端</p>
      </div>
    </div>
    <div class='bigimg' :style='{"background-image":"url("+listdata+")"}'></div>

    <ul class='for' @mouseover='mouseover' @mouseout='mouseout'>
      <li :class="i == n ? 'active' : '' " v-for='(v,i) in list ' :key='i' @mouseover='text(i)'></li>
    </ul>

  </div>
</template>

<script>
import axios from 'axios'
import config from '@/network/config'
export default {
  name: 'Swiper',
  data() {
    return {
      falg: false,
      list: [],
      listtop: {},
      n: 0,
      listdata: '',
      url: config.url
    }
  },
  methods: {
    getdata() {
      axios.get(`${this.url}/banner?imageView&blur=40x20`, {
        params: {
          type: 2
        }
      }).then(res => {
        this.list = res.data.banners
      })
    },
    selectImg(x) {
      this.listdata = this.list[x].pic
    },
    //  下一章上一张
    go() {
      this.timer = setInterval(() => {
        this.n++
        if (this.n == this.list.length) {
          this.n = 0
        }
        this.selectImg(this.n)
      }, 2000)
    },
    next(e) {
      if (e == 'left') {
        if (this.n == 0) {
          this.n = this.list.length
        }
        this.n--
        this.selectImg(this.n)
      }

      if (e == 'right') {
        this.selectImg(this.n)
        this.n++
        if (this.n == this.list.length) {
          this.n = 0
        }

      }
    },
    mouseover() {
      clearInterval(this.timer)
    },
    mouseout() {
      this.go()
    },
    text(i) {
      this.n = i
      this.selectImg(this.n)
    }, //小圆点下一张
    leave() {
      this.falg = !this.falg
    }
  },
  created() {
    this.go()
    this.getdata()
  }


}
</script> 

<style scoped>
.swipercontainer {
  position: relative;
}

.bigimg {
  background-size: 6000000px;
  background-position: center center;
  width: 100%;
  height: 285px;
  position: absolute;
  top: 0;
  z-index: -1;
  filter:blur(40 * 20);
  opacity: .5;
  transition: all .5s;

}

.swiper {
  width: 982px;
  height: 285px;
  margin: 0 auto;
  position: relative;
  display: flex;

}

.swiper li {
  width: 732px;
}

.swiper img {
  width: 732px;

}

.left {
  width: 37px;
  height: 63px;
  background: url("../../assets/images/banner.png");
  background-position: 0 -430px;
  position: absolute;
  top: 121px;
  left: -55px;
}

.right {
  width: 37px;
  height: 63px;
  background: url("../../assets/images/banner.png");
  background-position: 0 -578px;
  position: absolute;
  top: 121px;
  right: -55px;
}

.img {
  width: 254px;
  height: 285px;
  position: absolute;
  right: 0;
  background: url("../../assets/images/download.png");
  cursor: pointer;
  display: flex;
  align-items: flex-end;

}

.img p {
  margin: 10px auto;
  text-align: center;
  color: #8d8d8d;
  font-size: 12px;
}

.for {
  display: flex;
  position: absolute;
  left: 40%;
  bottom: 10px;
}

.for li {
  width: 10px;
  height: 10px;
  background-color: white;
  border-radius: 100%;
  margin-left: 5px;
  opacity: 0.5;
}

.active {
  background: red !important;
}

.bigimg {
  overflow: hidden;
}

.bigimg img {
  width: 6000px;
  height: 250px;
  background-position: center center;
}

</style>